<template>
  <div class="login_info">
    <div class="login_box">
      <div class="my_photo">
        <img src="../assets/logo.png" />
      </div>
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"  class="demo-ruleForm">
        <el-form-item  prop="username">
          <el-input  prefix-icon="el-icon-user"  v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item  prop="password">
          <el-input prefix-icon="el-icon-lock" type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>
<script>
  import { ElMessage } from 'element-plus'

  export default {
    name: "login",
    data(){
      return {
        ruleForm: {
          username: '',
          password: ''
        },
        rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 5, max: 13, message: '长度在 5到 13个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        //当前组件下面的所有的引用
          //取到了   ruleForm这个表单的引用
                            //   表单的自定义验证
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.axios.post('login',this.ruleForm).then(data=>{
                if(data.data.meta.status !== 200) return ElMessage.error(data.data.meta.msg);
                //登录成功
              ElMessage.success("登录成功");

              sessionStorage.setItem('token',data.data.data.token);
              //跳转到后台主界面
              this.$router.push('/home');


            }).catch(err=>{
              console.log(err);
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style scoped>
.login_info{
  background-color: deepskyblue;
  height: 100%;
}
.login_box{
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.my_photo{
  width: 130px;
  height: 130px;
  border: 1px solid #eee;
  border-radius: 50%;
  padding: 10px;
  position: absolute;
  left: 50%;
  top:-30%;
  transform: translateX(-50%);
  z-index: 5;
  box-shadow: 0 0 20px #ddd;
}
.my_photo img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
}
form{
  width: 90%;
  margin: 80px auto 0;
}
</style>
